<template>
  <list>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">甲方(购买户):</text>
        </div>
        <input class="value" placeholder="在此输入" @change='change' :xyjf="xyjf"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">甲方联系方式:</text>
        </div>
        <input class="value" placeholder="请输入甲方联系方式" @change='changejflxdh' :jflxdh="jflxdh"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">乙方(中标单位):</text>
        </div>
        <text class="key-text">{{xyyfmc}}</text>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">乙方联系方式:</text>
        </div> 
        <input class="value" placeholder="请输入乙方联系方式" @change='changeyflxdh' :yflxdh="yflxdh"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">客户编号:</text>
        </div>
        <input class="value" placeholder="请填写客户编号" @change='changekhbh' :khbh="khbh"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">电表号:</text>
        </div>
        <input class="value" placeholder="请填写电表号" @change='changedbh' :dbh="dbh"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">协议丙方(村委会):</text>
        </div>
        <input class="value" placeholder="协议丙方" @change='changexybf' :xybf="xybf"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">丙方联系方式:</text>
        </div>
        <input class="value" placeholder="请输入丙方联系方式" @change='changebflxfs' :bflxfs="bflxfs"/>
      </div>
    </cell>
    <cell>
      <div class="cell" @click="ssxzqhEvent">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">所属行政区划:</text>
        </div>
        <text class="value notice">{{ssxzqh}}</text>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">工程地址:</text>
        </div>
        <input class="value" placeholder="请输入工程地址" @change='changegcdz' :gcdz="gcdz" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">采暖方式:</text>
        </div>
        <input class="value" placeholder="请输入采暖方式" @change='changecnfs' :cnfs="cnfs" />
      </div>
    </cell>
    <cell>
      <div class="cell" @click="addEquip">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">采暖末端方式:</text>
        </div>
        <text class="value notice">{{mdcnfs}}</text>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">暖气片数:</text>
        </div>
        <input class="value" placeholder="请输入暖气片数" @change='changenqps' :nqps="nqps" />
      </div>
    </cell>
    <cell>
      <div class="cell" @click="cpxhEvent">
        <div class="key"> 
          <text class="key-text">产品型号:</text>
        </div>
        <text class="value notice">{{cpxh}}</text>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">单三项设备:</text>
        </div>
        <input class="value" placeholder="请输入单三项设备" @change='changedsxd' :dsxd="dsxd" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">供暖面积/平米:</text>
        </div>
        <input class="value" placeholder="请输入供暖面积" @change='changegnmj' :gnmj="gnmj" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">产品单价/元:</text>
        </div>
        <input class="value" placeholder="请输入产品单价" @change='changecpdj' :cpdj="cpdj" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">产品数量:</text>
        </div>
        <input class="value" placeholder="请输入产品数量" @change='changecpsl' :cpsl="cpsl" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">产品总价/元:</text>
        </div>
        <input class="value" placeholder="请输入产品总价" @change='changecpzj' :cpzj="cpzj"/>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">总费用/元:</text>
        </div>
        <input class="value" placeholder="请输入总费用" @change='changezfy' :zfy="zfy" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">政府补贴费用/元:</text>
        </div>
        <input class="value" placeholder="请输入政府补贴费用" @change='changezfbtfy' :zfbtfy="zfbtfy" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">农户自筹费用:</text>
        </div>
        <input class="value" placeholder="请输入农户自筹费用" @change='changenhzcfy' :nhzcfy="nhzcfy" />
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">免费质保时间:</text>
        </div>
        <input class="value" placeholder="免费质保时间" @change='changebxq' :bxq="bxq"/>
      </div>
    </cell>
    <cell>
      <div class="cell" @click="timeEvent">
        <div class="key">
          <text class="require">*</text>
          <text class="key-text">协议签订时间:</text>
        </div>
        <text class="value notice">{{xyqdsj}}</text>
      </div>
    </cell>
    <cell>
      <div class="cell">
        <div class="key">
          <text class="key-text">建筑面积/平米:</text>
        </div>
        <input class="value" placeholder="请输入建筑面积" @change='changejzmj' :jzmj="jzmj" />
      </div>
    </cell>
    <cell>
      <div class="bzCell">
        <div class="bzKey">
          <text class="key-text">备注:</text>
        </div>
        <textarea class="textArea" cols="7" rows="7" placeholder="在此处输入备注信息" @change='changebz' :bz="bz"></textarea>
      </div>
    </cell>
    <cell>
        <div class="listItems">
            <button class="btnbar" @click="queryA"><text class="btnText">完成</text></button>
        </div>
    </cell>
    <wxc-mask width="650"
                height= '650'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="true"
                :has-overlay="true"
                :show="show"
                :has-animation="hasAnimation"
                @wxcMaskSetHidden="wxcMaskSetHidden">
                <p class="contItem" v-for="(item, ind) in datalist" :key="ind" @click="Choice(ind, datalist[ind])">
                    <input type="radio" name="aa" class="input" :class="[activeIndex === ind ? 'activeInput' : '']" /><text class="listItem" :class="[activeIndex === ind ? 'active' : '']">{{item}}</text>
                </p>
    </wxc-mask>
    <wxc-mask width="700"
                height= '700'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="true"
                :has-overlay="true"
                :show="cpxhShow"
                :has-animation="hasAnimation"
                @wxcMaskSetHidden="wxcMaskSetHidden">
                <list>
                  <cell class="contItem" v-for="(item, ind) in cpxhDatalist" :key="ind" @click="Choicecpxh(ind, cpxhDatalist[ind].SBXH, cpxhDatalist[ind].SBLX_ID)">
                    <input type="radio" name="aa" class="input" :class="[activeInd === ind ? 'activeInput' : '']" /><text class="listItem" :class="[activeInd === ind ? 'active' : '']">{{item.SBXH}}</text>
                  </cell>
                </list>
    </wxc-mask>
    <wxc-mask width="500"
              height= '400'
              border-radius="0"
              duration="300"
              mask-bg-color="#FFFFFF"
              :overlay-can-close="true"
              :has-overlay="true"
              :show="showTitle"
              :has-animation="hasAnimation"
              @wxcMaskSetHidden="wxcMaskSetHidden">
              <text class="mark">{{title}}</text>
          </wxc-mask>
    <wxc-mask width="700"
                height= '700'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="true"
                :has-overlay="true"
                :show="xzqhShow"
                :has-animation="hasAnimation"
                @wxcMaskSetHidden="wxcMaskSetHidden">
                    <div class="choice">
                      <scroller class="scroller choiceItem" scroll-direction="horizontal">
                          <p class="textParent" v-for="(item, ind) in placeNameAll" :key="ind" @click="dele(ind)">
                              <text class="standardDirection" v-if="ind != '0'">></text><text class="placeName" ref="placeOne">{{item}}</text>
                          </p>
                      </scroller>
                      <div class="sure" @click="sureBtn">
                          <text class="sureItem">确定</text>
                      </div>
                  </div>
                <list class="list">
                  <cell class="contItem" v-for="(item, ind) in xzqhDatalist" :key="ind" @click="Choicexzqh(ind, xzqhDatalist[ind].XZQHDM, xzqhDatalist[ind].XZQHMC)">
                    <input type="radio" name="aa" class="input" :class="[onActive === ind ? 'activeInput' : '']" /><text class="listItem" :class="[onActive === ind ? 'active' : '']">{{item.XZQHMC}}</text>
                  </cell>
                </list>
    </wxc-mask>
  </list>
</template>
<script>
  import wxcMask from 'weex-ui/packages/wxc-mask'
  import { addIconFontSupport } from '@/config/iconConfig'
  import event from '@/net/event'
  import { getCache } from '@/util/storageUtils'
  import { CTCE_USER_INFO } from '@/config/storageTypes'
  const dom = weex.requireModule('dom')
  const picker = weex.requireModule('picker')
  
  export default {
    name: 'addItem',
    data () {
        return {
            show: false,
            cpxhShow: false,
            showTitle: false,
            xzqhShow: false,
            datalist: ['暖气片', '风机盘管', '暖气片加风机盘管', '蓄热式电暖器', '地暖加暖气片', '其他','不适用'],
            cpxhDatalist: [],
            xzqhDatalist: [],
            placeNameAll: [],
            XZQHDM: [],
            activeIndex: 0,
            activeInd: 0,
            onActive: '',
            title: '',
            xyjf: '',
            jflxdh: '',
            khbh: '',
            dbh: '',
            xyyf: '',
            xyyfmc: '',
            yflxdh: '',
            xybf: '',
            gcdz: '',
            cnfs: '',
            mdcnfs: '请选择采暖末端方式',
            nqps: '',
            cpxh: '请输入产品型号',
            dsxd: '',
            gnmj: '',
            cpdj: '',
            cpsl: '',
            cpzj: '',
            zfy: '',
            zfbtfy: '',
            nhzcfy: '',
            bxq: '',
            xyqdsj: '',
            bz: '',
            ssxzqh: '请输入所属行政区划',
            sblxid: '',
            jzmj: '',
            bflxfs: '',
            ind: ''
        }
    },
    components: {
        wxcMask
    },
    beforeCreate () {
      addIconFontSupport(dom, "../../")
      this.$notice.loading.show()
    },
    mounted () {
      this.$notice.loading.hide()
    },
    created(){
        let year = new Date().getFullYear()
        let month = new Date().getMonth() + 1
        let day = new Date().getDate()
        let hour = new Date().getHours()
        let min = new Date().getMinutes()
        let second = new Date().getSeconds()
        if(month < 10) {
            month = '0' + month
        }
        if(day < 10) {
            day = '0' + day
        }
        if(hour < 10) {
            hour = '0' + hour
        }
        if(min < 10) {
            min = '0' + min
        }
        if(second < 10) {
            second = '0' + second
        }
        this.xyqdsj = year + '-' + month + '-' + day
        // this.xyqdsj = year + '-' + month + '-' + day + ' ' + hour + ":" + min + ':' + second
        getCache(CTCE_USER_INFO).then(res => {
          const user = JSON.parse(res)
          this.xyyfmc = user.gsmc
          this.xyyf = user.gsdm
          event.getXySblxdroplist(user.gsdm).then(res => {
            this.cpxhDatalist = res.data.datalist
          })
        })
        this.$router.getParams().then(resData => {
            this.ind = resData.ind
        })
    },
    methods: {
        addEquip () {
            this.show = true
        },
        Choice(ind, item){
            this.mdcnfs = item
            this.activeIndex = ind
            this.show = false
        },
        change(e) {
          this.xyjf = e.value
        },
        changejflxdh(e) {
          this.jflxdh = e.value
        },
        changeyflxdh(e) {
          this.yflxdh = e.value
        },
        changekhbh (e) {
          this.khbh = e.value
        },
        changedbh (e) {
          this.dbh = e.value
        },
        changexybf (e) {
          this.xybf = e.value
        },
        changebflxfs (e) {
          this.bflxfs = e.value
        },
        changessxzqh (e) {
          this.ssxzqh = e.value
        },
        changegcdz (e) {
          this.gcdz = e.value
        },
        changecnfs (e) {
          this.cnfs = e.value
        },
        changenqps (e) {
          this.nqps = e.value
        },
        changedsxd (e) {
          this.dsxd = e.value
        },
        changegnmj (e) {
          this.gnmj = e.value
        },
        changecpdj (e) {
          this.cpdj = e.value
        },
        changecpsl (e) {
          this.cpsl = e.value
        },
        changecpzj (e) {
          this.cpzj = e.value
        },
        changezfy (e) {
          this.zfy = e.value
        },
        changezfbtfy (e) {
          this.zfbtfy = e.value
        },
        changenhzcfy (e) {
          this.nhzcfy = e.value
        },
        changebxq (e) {
          this.bxq = e.value
        },
        changejzmj (e) {
          this.jzmj = e.value
        },
        changebz (e) {
          this.bz = e.value
        },
        timeEvent(){
            picker.pickDate({
            value: this.xyqdsj
                }, e => {
                if (e.result === 'success') {
                    this.xyqdsj = e.data
                }
            })
        },
        ssxzqhEvent () {
          let len = this.XZQHDM.length
          this.$notice.loading.show()
          this.xzqhShow = true
          if(this.XZQHDM.length > 0) {
            event.XZQH(this.XZQHDM[len - 1]).then(res => {
              this.xzqhDatalist = res.result.datalist
              this.$nextTick(() => {
                this.scrollEnd()
                this.$notice.loading.hide()
              })
            })
          } else {
            getCache(CTCE_USER_INFO).then(res => {
              const user = JSON.parse(res)
              event.XZQH(user.xzqhdm).then(res => {
                this.xzqhDatalist = res.result.datalist
                this.$nextTick(() => {
                  this.scrollEnd()
                  this.$notice.loading.hide()
                })
              })
            })
          }
        },
        Choicexzqh(ind, xzqhdm, XZQHMC) {
          this.$notice.loading.show()
          this.placeNameAll.push(XZQHMC)
          this.XZQHDM.push(xzqhdm)
          this.onActive = ind
          setTimeout(() => {
            this.onActive = ''
          }, 400)
          event.XZQH(xzqhdm).then(res => {
            this.xzqhDatalist = res.result.datalist
            this.$nextTick(() => {
              this.scrollEnd()
              this.$notice.loading.hide()
            })
          })
        },
        dele(ind) {
            this.$notice.loading.show()
            let adcd = ''
            if(this.placeNameAll.length == 1 && ind == 0){
                this.placeNameAll.splice(-1, 1)
                this.XZQHDM.splice(-1, 1)
                adcd = this.userAdcd
            } else {
                this.placeNameAll.splice(ind, this.placeNameAll.length)
                this.XZQHDM.splice(ind, this.XZQHDM.length)
                adcd = this.XZQHDM[ind-1]
            }
            event.XZQH(adcd).then(res => {
                this.xzqhDatalist = res.result.datalist
                this.$nextTick(() => {
                  this.scrollEnd()
                  this.$notice.loading.hide()
                })
            })
        },
        sureBtn(){
          this.xzqhShow = false
          const length = this.XZQHDM.length
          if (length === 0) {
            this.ssxzqh = '请输入所属行政区划'
          } else {
            this.alert(this.XZQHDM[length - 1])
            this.ssxzqh = this.XZQHDM[length - 1]
          }
        },
        scrollEnd () {
          const length = this.placeNameAll.length
          if (length !== 0) {
            dom.scrollToElement(this.$refs.placeOne[length - 1], {})
          }
        },
        Choicecpxh(ind, item, SBLX_ID) {
          this.activeInd = ind
          this.cpxh = item
          this.sblxid = SBLX_ID
          this.cpxhShow = false
        },
        cpxhEvent () {
          this.cpxhShow = true
        },
        queryA () {
          if (this.xyjf != '' && this.jflxdh != '' && this.xyyf != '' && this.yflxdh != '' && this.ssxzqh != '' && this.gcdz != '' && this.mdcnfs != '' && this.gnmj != '' && this.xyqdsj != ''){
            event.getXySaveInstallxy('', this.xyjf, this.jflxdh, this.khbh, this.dbh, this.xyyf, this.xyyfmc, this.yflxdh, this.xybf, this.gcdz, this.cnfs, this.mdcnfs, this.nqps, this.cpxh, this.dsxd, this.gnmj, this.cpdj, this.cpsl, this.cpzj, this.zfy, this.zfbtfy, this.nhzcfy, this.bxq, this.xyqdsj, this.bz, this.ssxzqh, this.sblxid, this.jzmj, this.bflxfs).then(res => {
              this.title = '添加成功'
              this.showTitle = true
              setTimeout(() => {
                this.showTitle = false
                if(this.ind == 0) {
                  this.$router.back()
                } else if(this.ind == 1) {
                  this.$router.back({
                    length: 2
                  })
                }
              }, 800)
            })
          } else {
            this.title = '请将信息填写完整'
            this.showTitle = true
            setTimeout(() => {
              this.showTitle = false
            }, 800)
          }
      },
      wxcMaskSetHidden () {
        this.show = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../config/styles";

  .cell {
    width: 750px;
    height: 100px;
    background-color: white;
    @include border(2px, solid, #f5f5f5, bottom);
    padding: 0 20px;
    flex-direction: row;
    align-items: center;
  }
  .outline {
    margin-top: 20px;
  }
  .add-icon {
    font-family: wxcIconFont;
    color: #3EAFFC;
  }
  .space-between {
    justify-content: space-between;
  }
  .icon-btn {
    height: 100px;
    width: 80px;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
  }
  .text {
    color: #666;
  }
  .delete-icon {
    font-family: wxcIconFont;
    color: #ccc;
    font-size: 42px;
    margin-right: -5px;
  }
  .left {
    justify-content: space-around;
    height: 70px;
  }
  .equip-item {
    flex-direction: row;
    padding-left: 30px;
  }
  .line {
    width: 8px;
    height: 28px;
    background-color: rgba(62,175,252,1);
    margin-left: -25px;
    margin-right: 15px;
  }
  .equip-key{
    color:#666;
    font-family:PingFangSC-Regular;
    font-size: 25px;
    width: 160px;
  }
  .equip-value{
    font-family:PingFangSC-Regular;
    color:rgba(151,151,151,1);
    font-size: 25px;
  }
  .value {
    flex: 1;
    height: 80px;
    font-size: 28px;
    color: #666;
    line-height: 80px;
  }
  .key {
    width: 235px;
    flex-direction: row;
  }
  .key-text {
    color: #666;
  }
  .notice {
    color: #3EAFFC;
  }
  .deletInput {
    height: 1px;
    margin-top: -1px;
  }
  .require {
    color: red;
    font-size: 22px;
    padding-right: 4px;
  }
  .image-line {
    width: 8px;
    height: 28px;
    background-color: rgba(62,175,252,1);
    margin: 15px;
  }
  .image-wrapper {
    padding: 20px;
    flex-direction: row;
  }
  .listItems{
    width: 750px;
    height: 100px;
    justify-content: center;
    align-items: center;
    margin-top: 44px;
    margin-bottom: 44px;
}
.bzCell{
    width: 750px;
    height: 264px;
    background-color: #fff;
    flex-direction: row;
    padding: 0 20px;
    padding-top: 25px;
}
.bzKey{
    width: 235px;
    flex-direction: row;
}
.btnbar{
    width: 285px;
    height: 60px;
    border-radius: 10px;
    background-color: rgba(62,175,252,1);
    justify-content: center;
    align-items: center;
}
.btnText{
    color: #fff;
    font-size: 28px;
    font-family:PingFangSC-Regular;
}
.textArea{
    width: 470px;
    height: 220px;
    font-size: 26px;
    font-family:PingFangSC-Regular;
    color:rgba(151,151,151,1);
}
.input{
    width: 25px;
    height: 25px;
    border-radius: 25%;
    border-color: rgba(151,151,151,1);
    border-style: solid;
    border-width: 1px;
    margin-right: 20px;
}
.contItem{
    width: 650px;
    height: 90px;
    border-bottom-color: #f5f5f5;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
  }
  .listItem{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.activeInput{
    width: 25px;
    height: 25px;
    border-color: rgba(62,175,252,1);
    border-width: 7px;
    border-style: solid;
}
.active{
    color: rgba(62,175,252,1);
}
.mark{
    display: block;
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
}
.choice{
    width: 700px;
    height: 100px;
    background-color: rgba(238,238,238,1);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
}
.choiceItem{
    display: block;
    width: 550px;
    height: 100px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    
}
.textParent{
    flex-direction: row;
}
.placeName{
    /* padding-right: 15px; */
    font-size: 29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
    border-bottom-color: rgba(62,175,252,1);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.standardDirection{
    color: #999;
    padding-left: 10px;
    padding-right: 10px;
}
.standardDirection:first-child{
    border: none;
}
.sure{
    width: 100px;
    height: 50px;
    background-color:rgba(62,175,252,1);
    border-radius:8px;
    justify-content: center;
    align-items: center;
}
.sureItem{
    font-size: 25px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
</style>
